<template>
  <el-row :gutter="100" class="form-recharge">
    <el-col :span="12" class="recharge-left">
      <el-form :model="formRecharge" label-width="100px" size="small">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="单笔重置下限" prop="lower">
              <el-input v-model="formRecharge.lower">
                <span slot="prefix">￥</span>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单笔充值上限" prop="upper">
              <el-input v-model="formRecharge.upper">
                <span slot="prefix">￥</span>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="单笔充值档位" prop="gear">
          <el-input
            class="gear-input"
            v-model="input.value"
            v-for="(input, index) in formRecharge.gear"
            :key="index"
            :disabled="input.value === '自定义'"
          ></el-input>
        </el-form-item>
        <el-form-item class="text-center">
          <el-button type="primary" @click="callBack">确定修改</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="12">
      <div class="box-card" shadow="always">
        <div>
          <p class="view-label">充值金额（元）</p>
          <div class="money-wrap">
            <div class="money-icon">￥</div>
            <div class="money-label">可充值范围{{formRecharge.lower}}-{{formRecharge.upper}}</div>
          </div>
          <ul class="card-list">
            <li
              class="card-input"
              v-for="(input, index) in formRecharge.gear"
              :key="index"
            >{{input.value}}</li>
          </ul>
          <div>
            <el-button style="width:100%;" type="primary" size="small" round="circle">确定充值</el-button>
          </div>
        </div>
      </div>
      <p class="text-center view-label">租客充值预览</p>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "formRecharge",
  props: {
    formRecharge: {
      type: Object,
      type: {},
    },
  },
  methods: {
    callBack() {
      this.$emit('callBack');
    }
  }
};
</script>

<style lang="scss">
.form-recharge {
  .gear-input {
    max-width: 100px;
    margin-bottom: 10px;
    margin-right: 10px;
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 100%;
    .el-input {
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: none;
      padding: 0 15px;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 100%;
    }
  }
  .view-label {
    width: 326px;
    font-size: 12px;
    color: #909399;
  }
  .box-card {
    max-width: 326px;
    padding: 21px 25px 27px;
    background: #fff;
    opacity: 1;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  .recharge-left {
    padding-top: 20px;
  }
  .card-list {
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .card-input {
    border: 1px solid #dcdfe6;
    width: 78px;
    padding: 5px 0 6px;
    text-align: center;
    font-size: 15px;
    color: #909399;
    border-radius: 6px;
    margin-bottom: 12px;
    list-style: none;
  }
  .money-wrap {
    border-bottom: 1px solid #dcdfe6;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    .money-icon {
      padding-right: 19px;
      font-size: 39px;
      color: #202122;
    }
    .money-label {
      font-size: 14px;
      color: #c0c4cc;
    }
  }
}
</style>
